<template>
  <main class="main">
    <!-- 公告，需要使用 v-html 标签 -->
    <section class="handler-notice mb10">
      后台管理发布 v1.0.1 版本了！！
    </section>
    <!-- 主要内容 -->
    <div class="flex-row">
      <section class="flex-item left-box">
        <el-card class="card-item card-item__header view-info">
          <span slot="header" class="text-primary">访问数据</span>
          <div class="flex-row" style="width: 100%; height: 100%;">
            <div class="view-info__detail">
              <section class="item">
                <h2>访问数</h2>
                <span>1888</span>
              </section>
              <section class="item">
                <h2>文章数</h2>
                <span>189</span>
              </section>
              <section class="item">
                <h2>用户数</h2>
                <span>18</span>
              </section>
              <section class="item">
                <h2>评论数</h2>
                <span>0</span>
              </section>
            </div>
            <div class="view-info__chart flex-item">
              <echart :chart-option="viewChart"></echart>
            </div>
          </div>
        </el-card>
        <el-card class="card-item card-item__header other">
          <span slot="header" class="text-primary">等待开发</span>
        </el-card>
      </section>
      <!-- 如果使用了 flex 布局，right-box 的宽度就会被挤压 -->
      <section class="right-box">
        <el-card class="card-item card-item__header bulletin">
          <span slot="header" class="text-primary">公告栏</span>
          <el-carousel height="200px">
            <el-carousel-item v-for="banner in banners" :key="banner.id">
              <img :src="banner.url" width="100%" alt="" />
            </el-carousel-item>
          </el-carousel>
          <ul class="bulletin-list">
            <li class="bulletin-item">
              <span>【置顶】曾小晨的博客</span
              ><time datetime="2018-12-01">2018-12-01</time>
            </li>
            <li class="bulletin-item">
              <span>【置顶】曾小晨的博客</span
              ><time datetime="2018-12-01">2018-12-01</time>
            </li>
            <li class="bulletin-item">
              <span>【置顶】曾小晨的博客</span
              ><time datetime="2018-12-01">2018-12-01</time>
            </li>
            <li class="bulletin-item">
              <span>【置顶】曾小晨的博客</span
              ><time datetime="2018-12-01">2018-12-01</time>
            </li>
          </ul>
        </el-card>
        <el-card class="card-item card-item__header calender">
          <calendar
            v-if="!$isServer"
            is-expanded
            :attributes="attributes"
            ref="$calendar"
          ></calendar>
        </el-card>
      </section>
    </div>
  </main>
</template>

<script>
import Echart from "@/components/EChart";

export default {
  name: "dashboard",
  components: { Echart },
  data() {
    return {
      banners: [
        { id: 1, url: require("../../../assets/home-banner.jpg") },
        { id: 2, url: require("../../../assets/chenlaoban.png") }
      ],
      viewChart: {
        color: ["#5793f3", "#d14a61"],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["总访问数", "本月访问数"]
        },
        grid: {
          top: 40,
          bottom: 20,
          right: 0,
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#5793f3"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#5793f3"
            }
          }
        },
        series: [
          {
            name: "总访问数",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                areaStyle: {
                  color: "#f3f8ff"
                }
              }
            },
            data: [
              ["一月", 2.6],
              ["二月", 5.9],
              ["三月", 9.0],
              ["四月", 26.4],
              ["五月", 28.7],
              ["六月", 70.7],
              ["七月", 175.6]
            ]
          },
          {
            name: "本月访问数",
            type: "line",
            smooth: true,
            data: [
              ["一月", 2.6],
              ["二月", 15.9],
              ["三月", 9.0],
              ["四月", 6.4],
              ["五月", 8.7],
              ["六月", 30.7],
              ["七月", 170.6]
            ]
          }
        ]
      },
      attributes: [
        {
          key: "h",
          dot: true,
          popover: {
            label: "不要生气",
            visibility: "click",
            isInteractive: true
          },
          dates: new Date()
        },
        {
          key: "e",
          dot: true,
          popover: {
            label: "不要生气 plus",
            visibility: "click",
            isInteractive: true
          },
          dates: new Date()
        },
        {
          key: "l",
          dot: true,
          popover: {
            label: "不要生气 plus",
            visibility: "click",
            isInteractive: true
          },
          dates: new Date()
        },
        {
          key: "r",
          dot: true,
          popover: {
            label: "不要生气 plus",
            visibility: "click",
            isInteractive: true
          },
          dates: new Date()
        }
      ]
    };
  }
};
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  font-size: 0;
  overflow-y: auto;
}
.handler-notice {
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  line-height: 1.5;
  display: block;
  padding: 12px 11px;
  text-align: left;
  background: #f8f8f8;
}
.right-box,
.left-box {
  display: inline-block;
  vertical-align: top;
}
.left-box {
  width: 64%;
  height: 100%;
  margin-right: 1%;
}
.right-box {
  width: 600px;
}
.view-info {
  width: 100%;
}
.other {
  /*height: 63%;*/
  width: 100%;
}
.view-info__detail {
  padding-right: 20px;
  box-sizing: border-box;
  width: 350px;
  text-align: center;
  .item {
    display: inline-block;
    width: 49%;
    height: 50%;
    margin-top: 17px;
    overflow: hidden;
  }
  h2 {
    font-size: 16px;
    color: #9498a0;
  }
  span {
    display: inline-block;
    font-size: 22px;
    margin-top: 15px;
    color: #8eacea;
  }
}
.bulletin,
.calender {
  width: 100%;
  /*height: 58%;*/
  margin-bottom: 2%;
  /*min-height: 400px;*/
}

.bulletin-list {
  font-size: 14px;
  margin-top: 25px;
  .bulletin-item {
    line-height: 27px;
    time {
      float: right;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
</style>
